import React from "react"
import { useContext } from "react"
import { MyContext } from "../ContextDemo"
export const Father = () => {
  const { login, logout, person, addAge, getUserInfo, changeUser } = useContext(MyContext)
  const { name, age, gender } = person
  return (
    <div>
      <h3>Father组件</h3>
      <h3>用户信息展示</h3>
      <ul>
        <li>姓名:{name} </li>
        <li>年龄: {age}</li>
        <li>性别: {gender}</li>
      </ul>
      <br></br>
      <Son />
    </div>
  )
}

const Son = () => {

  return (
    <div>

      <h3>Son组件</h3>
      <MyContext.Consumer>
        {
          value => {
            const { person, login, logout, addAge, getUserInfo, changeUser } = value
            const { name, age, gender } = person
            const getInfo = async () => {
              const personinfo = await getUserInfo()
              console.log(`获取到的用户数据是:${personinfo}`)
              console.log(personinfo)
            }
            return (
              <>
                <h3>用户信息展示</h3>
                <ul>
                  <li>姓名:{name} </li>
                  <li>年龄: {age}</li>
                  <li>性别: {gender}</li>
                </ul>
                <button onClick={addAge}>年龄+1</button>
                <button onClick={getInfo}>获取用户信息</button>
                <button onClick={changeUser}>切换用户</button>
                <button onClick={login}>登录</button>
                <button onClick={logout}>退出</button>
              </>
            )
          }
        }
      </MyContext.Consumer>

    </div>
  )
}